<template>
	<div class="bg">
		<goback title="资料完善"></goback>


		<swiper class="swiper-container" ref="mySwiper">
			<swiper-slide class="swiper-slide">
				<div class="card">
					<div class="card_title">完善资料</div>
					<div class="everycon_container">
						<div>昵称:</div>
						<input placeholder="填写您的昵称,便于展示" v-model="user.name" />
						<img :src="require(`@/assets/icons/随机.png`)" alt="" @click="getRandomName">
					</div>
					<div class="everycon_container head_box">
						<div>头像:</div>
						<img :src="user.head_img" alt="" @click="selectImg">
						<input type="file" placeholder="请选择您的头像" @change="change" style="display:none;" ref="select_imgs"/>
						<button @click="getRandomPic">随机头像</button>
					</div>
				</div>
				<div class="outer_box">
					<button class="Btn" @click="changeSwiper(1)">下一步</button>
				</div>
			</swiper-slide>
			<swiper-slide class="swiper-slide">
				<div class="card small">
					<div class="card_title">请选择身份</div>
					<div class="position_container">

						<div class="position_everycon" @click="choose(0)" :class="{'select': Has_Select==0}">
							<div>我是农户</div>
							<img :src="require(`@/assets/firstLogin/农户.png`)" alt="">
							<div>我要出售秸秆</div>
						</div>

						<div class="position_everycon" @click="choose(1)" :class="{'select': Has_Select==1}">
							<div>我是企业</div>
							<img :src="require(`@/assets/firstLogin/企业.png`)" alt="">
							<div>我要回收秸秆</div>
						</div>

					</div>

				</div>

				<div class="card city_select_container">
					<div class="card_title">
						城市选择
					</div>
					<div class="city_position">
						<baidu-map @ready="getCurrentCity">
							<button @click="getPosition">一键定位</button>
							<div>{{position_result}}</div>
						</baidu-map>
					</div>
				</div>


				<div class="outer_box">
					<button class="Btn" @click="send">完成</button>
				</div>
			</swiper-slide>
		</swiper>


	</div>
</template>

<script>
	import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
	export default {
		name: "firstLogin",
		data() {
			return {
				activePage: 0,
				Has_Select: 0,
				usersName: ['秸秆小达人',
					'绿色回收侠',
					'环保小能手',
					'秸秆守护者',
					'绿色使者',
					'回收小专家',
					'秸秆小卫士',
					'环保先锋',
					'绿色生活者',
					'秸秆回收王'
				],
				randomImgs: ['1', '2', '3', '4', '5', '6'],
				select_normal_head_imgs: true,
				custom_head_imgs_data: null,
				user: {
					name: '',
					head_img: `${this.IP}/img/头像1.jpg`
				},
				position_result: '',
				point: ''
			};
		},
		components: {
			BaiduMap,
		},
		mounted() {

		},
		beforeDestroy() {
			// 在组件销毁前卸载Swiper  
			this.$refs.mySwiper.swiperInstance.destroy(true,
				true); // 第二个参数为true会重置swiper到初始状态，第三个参数为true会移除swiper内部的dom元素  
		},
		mounted() {
			console.log(this.$store.getters);
		},
		methods: {
			selectImg(){
				this.$refs.select_imgs.click();
			},
			getCurrentCity({
				BMap
			}) {
				let geolocation = new BMap.Geolocation();
				geolocation.getCurrentPosition((result) => {
					
					this.point = result.point;
					console.log(this.point);
					let geocoder = new BMap.Geocoder();
					// 将经纬度坐标转换为地理位置描述  
					geocoder.getLocation(new BMap.Point(this.point.lng, this.point.lat), (result2) => {
						if (result2 && result2.address) {
							// 确保result2和result2.address存在，避免访问未定义的属性  
							let address = result2.address;
							// 如果你需要周围的POI信息，确保result2.surroundingPois数组存在且不为空  
							if (result2.surroundingPois && result2.surroundingPois.length > 0) {
								address += result2.surroundingPois[0].title;
							}
							this.position_result=address;
						} else {
							console.error('逆地址解析失败或结果中不包含地址信息');
						}
						}
						)
					
					
				})
			},
			changeSwiper(e) {
				this.$refs.mySwiper.swiperInstance.activeIndex = e;
				this.$refs.mySwiper.swiperInstance.update(); // 强制swiper更新
			},
			choose(e) {
				this.Has_Select = e;
			},
			send() {
				let that = this;

				if(this.position_result==''){
					this.$toast.showMessage("请先选择您的城市定位");
					return;
				}

				let formData = new FormData();
				formData.append('token', this.getStorage('token'));
				formData.append('username', this.user.name);
				formData.append('position', this.Has_Select);
				formData.append('address', this.position_result);
				// 假设你有一个文件输入字段，并且用户已经选择了一个文件
				if (this.select_normal_head_imgs == false) {
					formData.append('file', this.custom_head_imgs_data);
				}
				this.axios.post(`${this.IP}/UserCardFullfill`, formData, {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				}).then(res => {
					this.$toast.showMessage(res.data.result);
					if (res.data.result.includes('成功')) {
						setTimeout(() => {
							this.$router.push('/index');
						}, 3000)
					}
					// 处理响应...  
				}).catch(error => {
					console.log(error);
					// 处理错误...  
				});

			},
			getRandomName() {
				// 从usersName数组中随机选择一个元素  
				return this.user.name = this.usersName[Math.floor(Math.random() * this.usersName.length)];
			},
			getRandomPic() {
				// 从usersName数组中随机选择一个元素  
				this.select_normal_head_imgs = false;
				let path = `${this.IP}/img/头像` + Math.floor(Math.random() * this.randomImgs.length) + `.jpg`;
				const response = this.axios({
					method: 'get',
					url: path, // 你的图片URL  
					responseType: 'blob', // 告诉axios我们期望一个blob响应  
				}).then((response) => {
					let file = new File([response.data], 'image.jpg', {
						type: 'image/jpg'
					});
					this.custom_head_imgs_data = file;
					return this.user.head_img = path;
				});

			},
			change(e) {
				const files = event.target.files;
				if (files && files.length > 0) {
					// 获取第一个文件，如果用户可以选择多个文件，则可以根据需要处理多个文件  
					this.user.head_img = files[0];
					this.select_normal_head_imgs = false;
					this.custom_head_imgs_data = files[0];
					const reader = new FileReader();

					reader.onload = (e) => {
						this.user.head_img = e.target.result;
					};

					reader.readAsDataURL(files[0]);
				}
			},
			getPosition() {

			},

		}
	}
</script>

<style scoped>
	.card {
		height: 70vh;
	}

	.card.small {
		height: 40vh;
	}

	.everycon_container {
		display: flex;
		flex-direction: row;
		padding: 1vw;
		margin: 1vw;
		align-items: center;
	}

	.everycon_container div {
		padding: 2vw;
		font-size: 30px;
		width: 10vw;
	}

	.everycon_container input {
		border: 1px solid #bfbfbf;
		padding: 2vw;
		border-radius: 20px;
		flex: 1;
		text-align: center;
		font-size: 28px;
	}

	.everycon_container img {
		width: 32px;
		height: 32px;
		padding: 2vw;
	}

	.head_box {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.head_box img {
		width: 50vw;
		height: 50vw;
		align-self: center;
		border-radius: 40px;
	}

	.head_box button,
	.head_box input {
		width: 50vw;
		padding: 2vw;
		margin: 1vw auto;
		border-radius: 20px;
	}

	.outer_box {
		width: 100vw;
	}

	.Btn {
		display: block;
		width: 80vw;
		padding: 3vw;
		margin: 1vw auto;
		border-radius: 20px;
		background: linear-gradient(to right, #ffcf0e, #ff8002);
	}

	.position_container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
	}

	.position_everycon {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 2vw;
	}

	.position_everycon img {
		margin: 2vw;
		width: 200px;
		border-radius: 20px;
		padding: 2vw;
	}

	.position_everycon div {
		font-size: 38px;
	}

	.position_everycon.select {
		border: 1px solid #009900;
		border-radius: 20px;
	}

	.position_everycon.select div {
		color: #009900;
	}

	.position_everycon.select img {
		border: 1px solid #009900;
		border-radius: 50%;
	}

	.city_select_container {
		height: 20vh;
	}

	.city_position {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.city_position button {
		width: 80vw;
		height: 10vw;
		border-radius: 10px;
		margin: 3vw;
	}

	.city_position div {
		font-size: 32px;
		color: #333;
	}
</style>